<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <!-- 
        绑定样式：
            1.class样式
                写法: :class="xxx" xxx可以是字符串、对象、数组
                字符串写法适用于：类名不确定，要动态获取
                对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
                数组写法适用于：要绑定多个样式，个数确定，名字也确定，但是不确定要不要用
            2. style样式
                :style="{fontSize: xxx}" 其中xxx是动态值
                :style="[a,b]"其中a、b是样式对象
    
    -->
    <style>
        .normal{
            width: 200px;
            height: 100px;
            border: solid blue;
        }
        .basic {
            width: 400px;
            height: 200px;
            border: solid red;
            border-radius: 10%;
        }
        .happy {
            background-color: aqua;
        }
        .sad {
            background-color: cadetblue;
        }
        .style01 {
            font-size: 20px;
        }
        .style02 {
            background-color: tomato;
        }
        .style03 {
            border-radius: 10%;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        
        <!-- 绑定class样式，字符串写法， 适用于样式的类型不确定，需要动态制定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>  <br/> <br/>
        <!-- 绑定class样式，数组写法 ， 适用于要绑定的样式不确定，个数也不确定 ,使用classArr.shift()来删除，使用classArr.push()来添加属性-->
        <div class="normal" :class="classArr" >{{name}}</div>  <br/> <br/>
        <!-- 绑定class样式，对象写法，适用于 ，要绑定的样式个数确定，名字也确定但是需要动态决定用不用 -->
        <div class="normal" :class="classObj" >{{name}}</div>

    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:"#root",
            data() {
                return {
                    name:"高新兴",
                    classArr:["sytle01","style02","style03"],
                    mood:"",
                    classObj:{
                        style01:false,
                        style02:true
                    }
                }
            },
            methods :{
                changeMood(){
                    // 适用 this.
                    this.mood = this.mood == "happy" ? "sad" : "happy";
                }
            }
        })
    </script>
    



    
</body>
</html>